<template>
    <div class="container">
        <el-page-header @back="goBack" content="余额变动记录"></el-page-header>
        <div class="e-m-t-30">
            <div class="flex">
                <div class="e-flex-1">
                </div>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="">
                        <el-input placeholder="关键词搜索" v-model="key" prefix-icon="el-icon-search" clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 更多筛选条件 -->
        <div class="other-search-form is-active">
            <el-form label-position="left" :inline="true" size="small">
                <div class="flex align-items-center">
                    <!-- 时间筛选 -->
                    <timeChangeList v-model="timeType" @input="getList" @change="changeTime"></timeChangeList>
                </div>
                <div class="flex align-items-center">
                    <!-- <div class="e-flex-1">
                        <el-form-item label="所属地区">
                            <cityList v-model="cityId" @change="SelectCityList"></cityList>
                        </el-form-item>
                    </div> -->
                </div>
            </el-form>
        </div>
        <!-- 自定义表格 -->
        <custom-table :table-data="tableData" :columns="tableColumns"
            :actions="tableActions" :total="total" :page-index="pageIndex" :page-size="pageSize"
            @page-change="handlePagination" @action-click="handleTableAction">
            <template #amount="scope">
                <span :class="scope.row.amount > 0?'color-success':'color-danger'">{{ scope.row.amount }}</span>
            </template>
        </custom-table>
    </div>
</template>

<script>
    import timeChangeList from '@/components/form-select-type/timeChangeList.vue'
    export default {
        layout: 'admin',
        components: {
            timeChangeList
        },
        data() {
            return {
                id: 0,
                key: '',
                // 时间类型
                timeType: 0, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
                startDate: '', //开始时间
                endDate: '', //结束时间
                pageIndex: 1,
                pageSize: 10,
                total: 0,
                tableData: [],
                tableColumns: [
                    {
                        prop: 'number',
                        label: '单据编号',
                        width: 'auto',
                    },
                    {
                        prop: 'type',
                        label: '类型',
                    },
                    {
                        prop: 'amount',
                        label: '金额变动',
                        slotName: 'amount',
                        // formatter: row => `${row.user ? row.user.mobile : '--'}`
                    },
                    // {
                    //     prop: 'balance',
                    //     label: '余额',
                    // },
                    {
                        prop: 'createddatetime',
                        label: '创建时间',
                    },
                    {
                        prop: 'createusername',
                        label: '经手人',
                    },
                    {
                        prop: 'relationnumber',
                        label: '关联单据编号',
                    },
                    {
                        prop: 'remark',
                        label: '备注',
                        formatter: row => `${row.remark ? row.remark : '--'}`
                    }
                ],
                // tableActions: [
                //     {
                //         name: 'view',
                //         label: '查看'
                //     },
                // ],
            }
        },
        mounted() {
            this.id = this.$route.query.id
            this.getList()
        },
        methods:{
            goBack() {
                this.$router.go(-1)
            },
            // 获取列表
            getList(){
                this.$axios.post('/Franchise/Balance/List',{
                    PageIndex: this.pageIndex,
                    PageSize: this.pageSize,
                    Key: this.key,
                    timeType: this.timeType, //筛选时间类别：0全部，1今日，2昨日，3本月，4上月，5本季度，6上季度，7本年，9自定义时间段
                    startDate: this.startDate, //开始时间
                    endDate: this.endDate, //结束时间
                    franchiseId: this.id
                }).then((res)=>{
                    this.tableData = res.rows
                    this.total = res.total
                })
            },
            // 选择时间
            changeTime(e) {
                console.log(e)
                this.startDate = e['startDate']
                this.endDate = e['endDate']
                this.timeType = e['timeType']
                this.getList()
            },
            // 翻页操作处理
            handlePagination({ pageIndex, pageSize }) {
                this.pageIndex = pageIndex
                this.pageSize = pageSize
                this.getList(false) // 获取新数据
            },
            // 操作按钮点击事件
            handleTableAction({ action, row, event }) {
                switch (action) {
                    // case 'view':
                    //     this.goViewShow(event, row)
                    //     break
                    // case 'distribution-1':
                    //     this.distribution(row)
                    //     break
                    // case 'distribution-2':
                    //     this.distribution(row, true)
                    //     break
                    // case 'cancel':
                    //     this.cancelOrder(row)
                    //     break
                }
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>